@import "variable";

.button-default() {
  border-radius: 7px;
  background: rgba(252, 228, 49, 1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border: none;
}

.button-interaction() {
  &:not([disabled]):active {
    transform: translateY(1px);
  }

  &[disabled] {
    background: rgba(219, 219, 219, 1);
    color: rgba(255, 255, 255, 1);
  }
}

.hide-scrollbar() {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.route-fade () {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity @transition-time;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}

.slide-animation(){
  .slide-enter-active {
    animation: slide-in @transition-time ease-out;
  }

  .slide-leave-active {
    animation: slide-out @transition-time ease-out;
    /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
  }

  /* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
  .slide-move {
    transition: all @transition-time;
  }

  @keyframes slide-in {
    from {
      transform: translateX(-100vw)
    }
    to {
      transform: translateX(0)
    }
  }

  @keyframes slide-out {
    from {
      transform: translateX(0)
    }
    to {
      transform: translateX(-100vw)
    }
  }
}